<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}</div>
    </div>

    <div class="app-container margin-content padding-content">
      <el-form
        inline
        :model="dataForm"
        ref="dataForm">
        <el-form-item>
          <el-input v-model="dataForm.portName" clearable placeholder="口岸查验监管场所名称">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :key="tableKey"
        :data="tableData"
        v-loading="loading"
        :highlight-current-row="true"
        element-loading-text="正在加载..."
        style="width: 100%;">

        <el-table-column label="口岸查验监管场所名称" property="portName"/>
        <el-table-column label="配合提供查验服务的企业名称" property="chkCompany" width="180"/>
        <el-table-column label="审核人" property="auditorName"/>
        <el-table-column label="审核时间" property="auditTimeDesc"/>
        <el-table-column label="备注" property="remark" show-overflow-tooltip/>
        <el-table-column label="审核状态" property="auditStatus">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.auditStatus === 1" type="success">
              {{scope.row.auditStatus | auditStatusFilter}}
            </el-tag>
            <el-tag v-else-if="scope.row.auditStatus === 2" type="danger">
              {{scope.row.auditStatus | auditStatusFilter}}
            </el-tag>
            <el-tag v-else type="warning">
              {{scope.row.auditStatus | auditStatusFilter}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <a @click="view({portId: scope.row.portId})">明细</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  // api
  import { getAuditCosts } from '@/api/costSubsidies'
  // vuex
  import { mapMutations } from 'vuex'

  export default {
    name: 'cost-manage-list',
    data() {
      return {
        tableKey: 0,
        tableData: [],
        loading: false,
        dataForm: {
          portName: ''
        }
      }
    },
    created() {
      this._getAuditCosts()
    },
    methods: {
      _getAuditCosts() {
        this.loading = true
        getAuditCosts(this.dataForm).then((res) => {
          this.tableData = res.data.data
          this.loading = false
        })
      },
      handleSearch() {
        this._getAuditCosts()
      },
      view({ portId }) {
        console.log({ portId })
        this.setCurrentId({ portId })
        this.$parent.changeView(1)
      },
      ...mapMutations({
        setCurrentId: 'SET_CURRENTID'
      })
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">

</style>
